<template>
	<view class="container">
		<view class="header">
			<text class="title">MCP数据库智能操作</text>
			<text class="subtitle">通过自然语言进行数据查询和分析</text>
		</view>
		
		<!-- 选项卡导航 -->
		<view class="tabs">
			<view 
				v-for="(tab, index) in tabs" 
				:key="index" 
				:class="['tab-item', currentTab === index ? 'active' : '']"
				@click="switchTab(index)"
			>
				<text>{{tab.name}}</text>
			</view>
		</view>
		
		<!-- 自然语言查询 -->
		<view class="tab-content" v-if="currentTab === 0">
			<view class="query-box">
				<textarea
					class="query-input"
					v-model="queryText"
					placeholder="请输入您的查询，例如：'查询本月所有已支付的订单'"
					:disabled="isLoading"
				/>
				<button class="query-btn" :disabled="isLoading || !queryText" @click="executeQuery">
					<text v-if="isLoading">查询中...</text>
					<text v-else>执行查询</text>
				</button>
			</view>
			
			<view class="query-examples">
				<text class="example-title">示例查询:</text>
				<view class="example-list">
					<view class="example-item" v-for="(example, index) in queryExamples" :key="index" @click="useExample(example)">
						<text>{{example}}</text>
					</view>
				</view>
			</view>
			
			<!-- 查询结果 -->
			<view class="result-section" v-if="queryResult">
				<view class="result-header">
					<text class="result-title">查询结果</text>
					<text class="result-meta">共 {{queryResult.count || 0}} 条记录</text>
				</view>
				
				<view class="sql-box" v-if="queryResult.sql">
					<text class="sql-title">生成的SQL:</text>
					<text class="sql-code">{{queryResult.sql}}</text>
				</view>
				
				<scroll-view class="result-table-wrap" scroll-x="true">
					<view class="result-table" v-if="queryResult.results && queryResult.results.length > 0">
						<view class="table-header">
							<view class="table-cell" v-for="(key, index) in Object.keys(queryResult.results[0])" :key="index">
								<text>{{formatColumnName(key)}}</text>
							</view>
						</view>
						<view class="table-row" v-for="(row, rowIndex) in queryResult.results" :key="rowIndex">
							<view class="table-cell" v-for="(key, colIndex) in Object.keys(row)" :key="colIndex">
								<text>{{formatCellValue(row[key])}}</text>
							</view>
						</view>
					</view>
					<view class="empty-result" v-else>
						<text>没有查询到相关数据</text>
					</view>
				</scroll-view>
			</view>
		</view>
		
		<!-- 数据报表 -->
		<view class="tab-content" v-if="currentTab === 1">
			<view class="report-selector">
				<view class="form-item">
					<text class="label">报表类型:</text>
					<picker mode="selector" :range="reportTypes" range-key="label" @change="onReportTypeChange">
						<view class="picker">
							<text>{{selectedReportType.label || '请选择报表类型'}}</text>
							<text class="arrow">▼</text>
						</view>
					</picker>
				</view>
				
				<view class="form-item">
					<text class="label">时间周期:</text>
					<picker mode="selector" :range="periodOptions" @change="onPeriodChange">
						<view class="picker">
							<text>{{selectedPeriod || '请选择时间周期'}}</text>
							<text class="arrow">▼</text>
						</view>
					</picker>
				</view>
				
				<view class="date-range">
					<view class="form-item">
						<text class="label">开始日期:</text>
						<picker mode="date" :value="startDate" @change="onStartDateChange">
							<view class="picker">
								<text>{{startDate || '选择开始日期'}}</text>
							</view>
						</picker>
					</view>
					
					<view class="form-item">
						<text class="label">结束日期:</text>
						<picker mode="date" :value="endDate" @change="onEndDateChange">
							<view class="picker">
								<text>{{endDate || '选择结束日期'}}</text>
							</view>
						</picker>
					</view>
				</view>
				
				<button class="report-btn" :disabled="isLoading || !selectedReportType.value" @click="generateReport">
					<text v-if="isLoading">生成中...</text>
					<text v-else>生成报表</text>
				</button>
			</view>
			
			<!-- 报表结果 -->
			<view class="report-result" v-if="reportData">
				<view class="report-header">
					<text class="report-title">{{selectedReportType.label}}</text>
				</view>
				
				<!-- 报表内容将根据类型动态显示 -->
				<view class="report-content">
					<!-- 核心数据指标 -->
					<view class="metrics-bar" v-if="reportMetrics.length > 0">
						<view class="metric-item" v-for="(metric, index) in reportMetrics" :key="index">
							<text class="metric-value">{{metric.value}}</text>
							<text class="metric-label">{{metric.label}}</text>
						</view>
					</view>
					
					<!-- 这里将来会使用图表组件展示数据 -->
					<view class="chart-placeholder">
						<text>图表区域 - 将集成图表组件</text>
					</view>
					
					<!-- 数据表格 -->
					<scroll-view class="report-table-wrap" scroll-x="true" v-if="reportTableData.length > 0">
						<view class="report-table">
							<view class="table-header">
								<view class="table-cell" v-for="(column, index) in reportTableColumns" :key="index">
									<text>{{column.label}}</text>
								</view>
							</view>
							<view class="table-row" v-for="(row, rowIndex) in reportTableData" :key="rowIndex">
								<view class="table-cell" v-for="(column, colIndex) in reportTableColumns" :key="colIndex">
									<text>{{formatCellValue(row[column.key])}}</text>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
		
		<!-- 数据处理 -->
		<view class="tab-content" v-if="currentTab === 2">
			<view class="process-selector">
				<view class="form-item">
					<text class="label">处理操作:</text>
					<picker mode="selector" :range="processOperations" range-key="label" @change="onProcessOperationChange">
						<view class="picker">
							<text>{{selectedOperation.label || '请选择处理操作'}}</text>
							<text class="arrow">▼</text>
						</view>
					</picker>
				</view>
				
				<!-- 根据选择的操作显示不同的参数输入 -->
				<view class="operation-params" v-if="selectedOperation.value">
					<!-- 数据清理参数 -->
					<view class="param-section" v-if="selectedOperation.value === 'dataCleanup'">
						<view class="param-description">
							<text>将清理系统中的无效数据，包括过期未支付订单等</text>
						</view>
					</view>
					
					<!-- 数据分析参数 -->
					<view class="param-section" v-if="selectedOperation.value === 'dataAnalysis'">
						<view class="form-item">
							<text class="label">分析类型:</text>
							<picker mode="selector" :range="analysisTypes" @change="onAnalysisTypeChange">
								<view class="picker">
									<text>{{selectedAnalysisType || '请选择分析类型'}}</text>
								</view>
							</picker>
						</view>
					</view>
					
					<!-- 数据预测参数 -->
					<view class="param-section" v-if="selectedOperation.value === 'dataPrediction'">
						<view class="form-item">
							<text class="label">预测类型:</text>
							<picker mode="selector" :range="predictionTypes" @change="onPredictionTypeChange">
								<view class="picker">
									<text>{{selectedPredictionType || '请选择预测类型'}}</text>
								</view>
							</picker>
						</view>
						
						<view class="form-item">
							<text class="label">预测时长(月):</text>
							<slider :min="1" :max="12" :value="predictionMonths" show-value @change="onPredictionMonthsChange"></slider>
						</view>
					</view>
				</view>
				
				<button class="process-btn" :disabled="isLoading || !selectedOperation.value" @click="processData">
					<text v-if="isLoading">处理中...</text>
					<text v-else>执行操作</text>
				</button>
			</view>
			
			<!-- 处理结果 -->
			<view class="process-result" v-if="processResult">
				<view class="result-card">
					<view class="result-header">
						<text class="result-status" :class="processResult.status">{{processResult.status === 'success' ? '操作成功' : '操作失败'}}</text>
					</view>
					
					<view class="result-message">
						<text>{{processResult.message}}</text>
					</view>
					
					<!-- 显示详细结果 -->
					<view class="result-details" v-if="processResult.data">
						<view class="detail-item" v-for="(value, key) in processResult.data" :key="key">
							<text class="detail-label">{{formatColumnName(key)}}:</text>
							<text class="detail-value">{{formatCellValue(value)}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import request from '@/utils/request.js';
	
	export default {
		data() {
			return {
				// 选项卡配置
				tabs: [
					{ name: '智能查询', icon: 'search' },
					{ name: '数据报表', icon: 'chart' },
					{ name: '数据处理', icon: 'tool' }
				],
				currentTab: 0,
				isLoading: false,
				
				// 智能查询相关
				queryText: '',
				queryResult: null,
				queryExamples: [
					'查询本月所有已支付的订单',
					'统计每个老师的课程数量和收入',
					'查询价格超过100元的课程信息',
					'本周新增了多少用户',
					'查询用户最近30天的预约记录'
				],
				
				// 报表相关
				reportTypes: [
					{ label: '用户增长报表', value: 'userGrowth' },
					{ label: '课程表现报表', value: 'coursePerformance' },
					{ label: '销售分析报表', value: 'salesAnalysis' },
					{ label: '教师表现报表', value: 'teacherPerformance' }
				],
				selectedReportType: {},
				periodOptions: ['日', '周', '月'],
				selectedPeriod: '月',
				startDate: '',
				endDate: '',
				reportData: null,
				reportMetrics: [],
				reportTableData: [],
				reportTableColumns: [],
				
				// 数据处理相关
				processOperations: [
					{ label: '数据清理', value: 'dataCleanup' },
					{ label: '数据分析', value: 'dataAnalysis' },
					{ label: '数据预测', value: 'dataPrediction' }
				],
				selectedOperation: {},
				analysisTypes: ['用户行为分析', '课程受欢迎度分析'],
				selectedAnalysisType: '用户行为分析',
				predictionTypes: ['销售额预测', '用户增长预测'],
				selectedPredictionType: '销售额预测',
				predictionMonths: 3,
				processResult: null
			};
		},
		methods: {
			// 切换选项卡
			switchTab(index) {
				this.currentTab = index;
				// 清空之前的结果
				if (index === 0) this.queryResult = null;
				if (index === 1) this.reportData = null;
				if (index === 2) this.processResult = null;
			},
			
			// 使用示例查询
			useExample(example) {
				this.queryText = example;
			},
			
			// 执行自然语言查询
			async executeQuery() {
				if (!this.queryText.trim()) return;
				
				this.isLoading = true;
				this.queryResult = null;
				
				try {
					const response = await request({
						url: 'api/mcp/database/query',
						method: 'POST',
						data: {
							query: this.queryText
						}
					});
					
					if (response.data) {
						this.queryResult = response.data;
					}
				} catch (error) {
					uni.showToast({
						title: '查询失败: ' + (error.message || '未知错误'),
						icon: 'none'
					});
					console.error('查询执行失败:', error);
				} finally {
					this.isLoading = false;
				}
			},
			
			// 报表类型选择
			onReportTypeChange(e) {
				const index = e.detail.value;
				this.selectedReportType = this.reportTypes[index];
			},
			
			// 周期选择
			onPeriodChange(e) {
				const index = e.detail.value;
				this.selectedPeriod = this.periodOptions[index];
			},
			
			// 日期选择
			onStartDateChange(e) {
				this.startDate = e.detail.value;
			},
			
			onEndDateChange(e) {
				this.endDate = e.detail.value;
			},
			
			// 生成报表
			async generateReport() {
				if (!this.selectedReportType.value) return;
				
				this.isLoading = true;
				this.reportData = null;
				this.reportMetrics = [];
				this.reportTableData = [];
				this.reportTableColumns = [];
				
				// 转换周期为英文
				const periodMap = {
					'日': 'day',
					'周': 'week',
					'月': 'month'
				};
				
				try {
					const response = await request({
						url: '/api/mcp/database/report',
						method: 'POST',
						data: {
							reportType: this.selectedReportType.value,
							parameters: {
								period: periodMap[this.selectedPeriod],
								startDate: this.startDate,
								endDate: this.endDate
							}
						}
					});
					
					if (response.data) {
						this.reportData = response.data;
						this.processReportData();
					}
				} catch (error) {
					uni.showToast({
						title: '生成报表失败: ' + (error.message || '未知错误'),
						icon: 'none'
					});
					console.error('报表生成失败:', error);
				} finally {
					this.isLoading = false;
				}
			},
			
			// 处理报表数据，提取指标和表格数据
			processReportData() {
				if (!this.reportData) return;
				
				const data = this.reportData;
				
				// 根据报表类型处理数据
				switch (this.selectedReportType.value) {
					case 'userGrowth':
						// 提取核心指标
						this.reportMetrics = [
							{ label: '新增用户总数', value: data.total_new_users || 0 },
							{ label: '平均增长率', value: data.avg_growth_rate || '0%' }
						];
						
						// 设置表格数据
						if (data.data && data.data.length > 0) {
							this.reportTableData = data.data;
							
							// 根据周期类型设置列
							const periodType = data.period;
							const columns = [];
							
							if (periodType === 'day') {
								columns.push({ key: 'date', label: '日期' });
							} else if (periodType === 'week') {
								columns.push({ key: 'week', label: '周' });
							} else {
								columns.push({ key: 'month', label: '月份' });
							}
							
							columns.push(
								{ key: 'new_users', label: '新增用户数' },
								{ key: 'growth_rate', label: '增长率' }
							);
							
							this.reportTableColumns = columns;
						}
						break;
						
					case 'coursePerformance':
						// 提取核心指标
						this.reportMetrics = [
							{ label: '课程总数', value: data.total_courses || 0 },
							{ label: '总订单数', value: data.total_orders || 0 },
							{ label: '总收入', value: this.formatCurrency(data.total_revenue) }
						];
						
						// 设置表格数据
						if (data.data && data.data.length > 0) {
							this.reportTableData = data.data;
							this.reportTableColumns = [
								{ key: 'rank', label: '排名' },
								{ key: 'title', label: '课程名称' },
								{ key: 'order_count', label: '订单数' },
								{ key: 'total_revenue', label: '总收入' },
								{ key: 'avg_revenue', label: '平均收入' },
								{ key: 'unique_students', label: '学生数' }
							];
						}
						break;
						
					case 'salesAnalysis':
						// 提取核心指标
						this.reportMetrics = [
							{ label: '总订单数', value: data.total_orders || 0 },
							{ label: '总收入', value: this.formatCurrency(data.total_revenue) }
						];
						
						// 设置表格数据 - 时间维度销售
						if (data.sales_by_time && data.sales_by_time.length > 0) {
							this.reportTableData = data.sales_by_time;
							
							// 根据周期类型设置列
							const periodType = data.period;
							const columns = [];
							
							if (periodType === 'day') {
								columns.push({ key: 'date', label: '日期' });
							} else if (periodType === 'week') {
								columns.push({ key: 'week', label: '周' });
							} else {
								columns.push({ key: 'month', label: '月份' });
							}
							
							columns.push(
								{ key: 'order_count', label: '订单数' },
								{ key: 'revenue', label: '收入' }
							);
							
							this.reportTableColumns = columns;
						}
						break;
						
					case 'teacherPerformance':
						// 设置表格数据
						if (data.data && data.data.length > 0) {
							this.reportTableData = data.data;
							this.reportTableColumns = [
								{ key: 'name', label: '教师姓名' },
								{ key: 'class_count', label: '课程数' },
								{ key: 'student_count', label: '学生数' },
								{ key: 'total_revenue', label: '总收入' }
							];
						}
						break;
				}
			},
			
			// 数据处理操作选择
			onProcessOperationChange(e) {
				const index = e.detail.value;
				this.selectedOperation = this.processOperations[index];
			},
			
			// 分析类型选择
			onAnalysisTypeChange(e) {
				const index = e.detail.value;
				this.selectedAnalysisType = this.analysisTypes[index];
			},
			
			// 预测类型选择
			onPredictionTypeChange(e) {
				const index = e.detail.value;
				this.selectedPredictionType = this.predictionTypes[index];
			},
			
			// 预测月数选择
			onPredictionMonthsChange(e) {
				this.predictionMonths = e.detail.value;
			},
			
			// 执行数据处理操作
			async processData() {
				if (!this.selectedOperation.value) return;
				
				this.isLoading = true;
				this.processResult = null;
				
				// 准备参数
				const parameters = {};
				
				if (this.selectedOperation.value === 'dataAnalysis') {
					parameters.analysisType = this.selectedAnalysisType === '用户行为分析' ? 'userBehavior' : 'coursePopularity';
				} else if (this.selectedOperation.value === 'dataPrediction') {
					parameters.predictType = this.selectedPredictionType === '销售额预测' ? 'sales' : 'userGrowth';
					parameters.months = this.predictionMonths;
				}
				
				try {
					const response = await request({
						url: 'http://203.34.152.33/user/api/mcp/database/process',
						method: 'POST',
						data: {
							operation: this.selectedOperation.value,
							parameters: parameters
						}
					});
					
					if (response.data) {
						this.processResult = response.data;
					}
				} catch (error) {
					uni.showToast({
						title: '操作失败: ' + (error.message || '未知错误'),
						icon: 'none'
					});
					console.error('数据处理操作失败:', error);
				} finally {
					this.isLoading = false;
				}
			},
			
			// 格式化列名显示
			formatColumnName(columnName) {
				// 列名映射
				const columnMap = {
					'id': 'ID',
					'user_id': '用户ID',
					'course_id': '课程ID',
					'teacher_id': '教师ID',
					'name': '姓名',
					'title': '标题',
					'price': '价格',
					'amount': '金额',
					'created_at': '创建时间',
					'paid_at': '支付时间',
					'status': '状态',
					'count': '数量',
					'average': '平均值',
					'total': '总计',
					'order_count': '订单数',
					'revenue': '收入',
					'new_users': '新增用户',
					'growth_rate': '增长率',
					'total_revenue': '总收入',
					'avg_revenue': '平均收入',
					'unique_students': '学生数',
					'class_count': '课程数',
					'student_count': '学生数'
				};
				
				return columnMap[columnName] || columnName;
			},
			
			// 格式化单元格的值
			formatCellValue(value) {
				if (value === null || value === undefined) {
					return '-';
				}
				
				// 日期类型
				if (typeof value === 'string' && (value.includes('-') || value.includes('/'))) {
					if (value.match(/^\d{4}(-|\/)\d{1,2}(-|\/)\d{1,2}/) || value.match(/^\d{4}(-|\/)\d{1,2}/)) {
						return value;
					}
				}
				
				// 数字类型
				if (typeof value === 'number') {
					// 金额处理
					if (String(value).indexOf('.') > -1) {
						return value.toFixed(2);
					}
					return value.toString();
				}
				
				return value;
			},
			
			// 格式化货币显示
			formatCurrency(value) {
				if (value === null || value === undefined) {
					return '￥0.00';
				}
				return '￥' + parseFloat(value).toFixed(2);
			}
		}
	}
</script>

<style lang="scss">
.container {
	padding: 30rpx;
	background-color: #f7f8fa;
	min-height: 100vh;
}

.header {
	margin-bottom: 30rpx;
	
	.title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}
	
	.subtitle {
		font-size: 24rpx;
		color: #666;
		margin-top: 6rpx;
	}
}

.tabs {
	display: flex;
	background-color: #fff;
	border-radius: 12rpx;
	margin-bottom: 30rpx;
	overflow: hidden;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
	
	.tab-item {
		flex: 1;
		text-align: center;
		padding: 24rpx 0;
		font-size: 28rpx;
		color: #666;
		position: relative;
		
		&.active {
			color: #2979ff;
			
			&:after {
				content: '';
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
				width: 40%;
				height: 4rpx;
				background-color: #2979ff;
				border-radius: 2rpx;
			}
		}
	}
}

.tab-content {
	background-color: #fff;
	border-radius: 12rpx;
	padding: 30rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}

// 查询相关样式
.query-box {
	margin-bottom: 30rpx;
	
	.query-input {
		width: 100%;
		height: 200rpx;
		border: 2rpx solid #eee;
		border-radius: 12rpx;
		padding: 20rpx;
		font-size: 28rpx;
		color: #333;
		background-color: #f9f9f9;
		margin-bottom: 20rpx;
	}
	
	.query-btn {
		background-color: #2979ff;
		color: #fff;
		font-size: 28rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 40rpx;
	}
}

.query-examples {
	margin-bottom: 30rpx;
	
	.example-title {
		font-size: 26rpx;
		color: #666;
		margin-bottom: 20rpx;
	}
	
	.example-item {
		display: inline-block;
		background-color: #f1f5ff;
		color: #2979ff;
		font-size: 24rpx;
		padding: 12rpx 20rpx;
		border-radius: 30rpx;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
	}
}

.result-section {
	border-top: 2rpx solid #eee;
	padding-top: 30rpx;
	
	.result-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
		
		.result-title {
			font-size: 30rpx;
			font-weight: bold;
			color: #333;
		}
		
		.result-meta {
			font-size: 24rpx;
			color: #999;
		}
	}
}

.sql-box {
	background-color: #f5f7fa;
	padding: 20rpx;
	border-radius: 12rpx;
	margin-bottom: 30rpx;
	
	.sql-title {
		font-size: 24rpx;
		color: #666;
		margin-bottom: 10rpx;
	}
	
	.sql-code {
		font-size: 24rpx;
		color: #333;
		font-family: monospace;
		word-break: break-all;
	}
}

.result-table-wrap {
	width: 100%;
	overflow-x: auto;
	
	.result-table {
		min-width: 100%;
		border-collapse: collapse;
		font-size: 24rpx;
		
		.table-header {
			display: flex;
			background-color: #f5f7fa;
			border-radius: 8rpx 8rpx 0 0;
			
			.table-cell {
				flex: 1;
				min-width: 150rpx;
				padding: 20rpx;
				font-weight: bold;
				color: #666;
				text-align: left;
			}
		}
		
		.table-row {
			display: flex;
			border-bottom: 2rpx solid #f5f7fa;
			
			&:last-child {
				border-bottom: none;
			}
			
			.table-cell {
				flex: 1;
				min-width: 150rpx;
				padding: 20rpx;
				color: #333;
				text-align: left;
				word-break: break-all;
			}
		}
	}
	
	.empty-result {
		padding: 50rpx 0;
		text-align: center;
		color: #999;
		font-size: 28rpx;
	}
}

// 报表相关样式
.report-selector {
	margin-bottom: 30rpx;
	
	.form-item {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		
		.label {
			width: 180rpx;
			font-size: 28rpx;
			color: #666;
		}
		
		.picker {
			flex: 1;
			height: 70rpx;
			line-height: 70rpx;
			padding: 0 20rpx;
			background-color: #f5f7fa;
			border-radius: 8rpx;
			font-size: 28rpx;
			color: #333;
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			.arrow {
				font-size: 24rpx;
				color: #999;
			}
		}
	}
	
	.date-range {
		display: flex;
		justify-content: space-between;
		
		.form-item {
			width: 48%;
		}
	}
	
	.report-btn {
		background-color: #2979ff;
		color: #fff;
		font-size: 28rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 40rpx;
		margin-top: 20rpx;
	}
}

.report-result {
	border-top: 2rpx solid #eee;
	padding-top: 30rpx;
	
	.report-header {
		margin-bottom: 30rpx;
		
		.report-title {
			font-size: 30rpx;
			font-weight: bold;
			color: #333;
		}
	}
}

.metrics-bar {
	display: flex;
	justify-content: space-between;
	margin-bottom: 30rpx;
	
	.metric-item {
		background-color: #f5f7fa;
		padding: 20rpx;
		border-radius: 12rpx;
		width: 30%;
		text-align: center;
		
		.metric-value {
			font-size: 36rpx;
			font-weight: bold;
			color: #2979ff;
			display: block;
			margin-bottom: 10rpx;
		}
		
		.metric-label {
			font-size: 24rpx;
			color: #666;
		}
	}
}

.chart-placeholder {
	height: 300rpx;
	background-color: #f9f9f9;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 12rpx;
	margin-bottom: 30rpx;
	
	text {
		font-size: 28rpx;
		color: #999;
	}
}

.report-table-wrap {
	width: 100%;
	overflow-x: auto;
	
	.report-table {
		min-width: 100%;
		border-collapse: collapse;
		font-size: 24rpx;
		
		.table-header {
			display: flex;
			background-color: #f5f7fa;
			border-radius: 8rpx 8rpx 0 0;
			
			.table-cell {
				flex: 1;
				min-width: 150rpx;
				padding: 20rpx;
				font-weight: bold;
				color: #666;
				text-align: left;
			}
		}
		
		.table-row {
			display: flex;
			border-bottom: 2rpx solid #f5f7fa;
			
			&:last-child {
				border-bottom: none;
			}
			
			.table-cell {
				flex: 1;
				min-width: 150rpx;
				padding: 20rpx;
				color: #333;
				text-align: left;
				word-break: break-all;
			}
		}
	}
}

// 数据处理相关样式
.process-selector {
	margin-bottom: 30rpx;
	
	.operation-params {
		margin: 20rpx 0;
		padding: 20rpx;
		background-color: #f9f9f9;
		border-radius: 12rpx;
		
		.param-description {
			font-size: 26rpx;
			color: #666;
			margin-bottom: 20rpx;
		}
	}
	
	.process-btn {
		background-color: #2979ff;
		color: #fff;
		font-size: 28rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 40rpx;
	}
}

.process-result {
	border-top: 2rpx solid #eee;
	padding-top: 30rpx;
	
	.result-card {
		background-color: #f9f9f9;
		border-radius: 12rpx;
		padding: 30rpx;
		
		.result-header {
			margin-bottom: 20rpx;
			
			.result-status {
				font-size: 32rpx;
				font-weight: bold;
				
				&.success {
					color: #07c160;
				}
				
				&.error {
					color: #fa5151;
				}
			}
		}
		
		.result-message {
			font-size: 28rpx;
			color: #333;
			margin-bottom: 30rpx;
		}
		
		.result-details {
			.detail-item {
				display: flex;
				margin-bottom: 15rpx;
				
				.detail-label {
					width: 200rpx;
					font-size: 26rpx;
					color: #666;
				}
				
				.detail-value {
					flex: 1;
					font-size: 26rpx;
					color: #333;
				}
			}
		}
	}
}
</style> 